<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>作业 29</title>
        <style>
            canvas {
                outline: 1px dashed lightskyblue;
                position: fixed;
                top: 40px;
                background-color: black;
            }
        </style>
        <!-- 引入所有用到的文件 -->
        <script src='utils.js'></script>
        <script src='illidan.js'></script>
        <script src='guaimage.js'></script>
        <script src='gua_object.js'></script>
        <script src='vector.js'></script>
        <script src='color.js'></script>
        <script src='vertex.js'></script>
        <script src='matrix.js'></script>
        <script src='mesh.js'></script>
        <script src='canvas.js'></script>
    </head>
    <body>
        <canvas id="id-canvas" width="720" height="479"></canvas>
<script>
// 函数名应该用 const 修饰, 这样不会被意外修改
test1 = function(){
    let canvas = GuaCanvas.new('#id-canvas')
    let mesh = GuaMesh.cube()
    canvas.drawMesh(mesh)
    canvas.render()
    setInterval(function() {
        canvas.clear()
        mesh.rotation.y += 0.1
        mesh.rotation.x += 0.1
        mesh.rotation.z += 0.1
        canvas.drawMesh(mesh)
        canvas.render()
    }, 100)
}
test2 = function(){
    let canvas = GuaCanvas.new('#id-canvas')
    let mesh = GuaMesh.fromGua3d(illidan, guaimage)
    canvas.drawMesh(mesh)
    canvas.render()
    setInterval(function() {
        canvas.clear()
        mesh.rotation.y += 0.1
        canvas.drawMesh(mesh)
        canvas.render()
    }, 100)
}
test3 = function(){
    let canvas = GuaCanvas.new('#id-canvas')
    canvas.clear()
    canvas.drawImage(guaimage)
    canvas.render()
}
const __main = function() {
    // test1()
    // test2()
    test3()
}

__main()
</script>
    </body>
</html>
